<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Universal Debug Logger - 通用JavaScript调试系统</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
        line-height: 1.6;
        color: #333;
        background: #f8fafc;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }

      /* 头部 */
      .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 60px 0;
        text-align: center;
      }

      .header h1 {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .header p {
        font-size: 1.3rem;
        opacity: 0.9;
        margin-bottom: 30px;
      }

      .badges {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .badge {
        background: rgba(255, 255, 255, 0.2);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
        backdrop-filter: blur(10px);
      }

      /* 导航 */
      .nav {
        background: white;
        padding: 20px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 100;
      }

      .nav ul {
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
      }

      .nav a {
        text-decoration: none;
        color: #666;
        font-weight: 500;
        padding: 10px 15px;
        border-radius: 8px;
        transition: all 0.3s ease;
      }

      .nav a:hover,
      .nav a.active {
        color: #667eea;
        background: #f1f5f9;
      }

      /* 主要内容 */
      .main {
        padding: 60px 0;
      }

      .section {
        margin-bottom: 80px;
      }

      .section h2 {
        font-size: 2.5rem;
        color: #1e293b;
        margin-bottom: 30px;
        text-align: center;
      }

      .section h3 {
        font-size: 1.8rem;
        color: #334155;
        margin: 40px 0 20px 0;
        border-left: 4px solid #667eea;
        padding-left: 20px;
      }

      .section h4 {
        font-size: 1.3rem;
        color: #475569;
        margin: 30px 0 15px 0;
      }

      .section p {
        font-size: 1.1rem;
        margin-bottom: 20px;
        color: #64748b;
      }

      /* 特性卡片 */
      .features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin: 50px 0;
      }

      .feature-card {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }

      .feature-card:hover {
        transform: translateY(-5px);
      }

      .feature-icon {
        font-size: 3rem;
        margin-bottom: 20px;
      }

      .feature-card h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        border: none;
        padding: 0;
      }

      /* 代码块 */
      pre {
        background: #2d3748 !important;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
        overflow-x: auto;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      code {
        font-family: 'Fira Code', 'Monaco', 'Cascadia Code', monospace;
        font-size: 0.9rem;
      }

      .inline-code {
        background: #e2e8f0;
        padding: 3px 6px;
        border-radius: 4px;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        color: #e53e3e;
      }

      /* 安装部分 */
      .install-section {
        background: white;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        margin: 40px 0;
      }

      .install-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }

      .install-tab {
        padding: 10px 20px;
        background: #f1f5f9;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
      }

      .install-tab.active {
        background: #667eea;
        color: white;
      }

      /* 步骤 */
      .steps {
        counter-reset: step;
      }

      .step {
        counter-increment: step;
        margin-bottom: 40px;
        padding-left: 60px;
        position: relative;
      }

      .step::before {
        content: counter(step);
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        background: #667eea;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
      }

      .step h4 {
        margin-top: 0;
        color: #1e293b;
      }

      /* 示例代码 */
      .example {
        background: white;
        border-radius: 10px;
        padding: 30px;
        margin: 30px 0;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
      }

      .example h4 {
        margin-top: 0;
        color: #667eea;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 10px;
      }

      /* 警告框 */
      .alert {
        padding: 20px;
        border-radius: 10px;
        margin: 20px 0;
        border-left: 4px solid;
      }

      .alert-info {
        background: #e0f2fe;
        border-color: #0ea5e9;
        color: #0c4a6e;
      }

      .alert-warning {
        background: #fef3c7;
        border-color: #f59e0b;
        color: #92400e;
      }

      .alert-success {
        background: #d1fae5;
        border-color: #10b981;
        color: #065f46;
      }

      /* 脚部 */
      .footer {
        background: #1e293b;
        color: white;
        text-align: center;
        padding: 40px 0;
      }

      /* 响应式 */
      @media (max-width: 768px) {
        .header h1 {
          font-size: 2.5rem;
        }

        .nav ul {
          gap: 20px;
        }

        .features {
          grid-template-columns: 1fr;
        }

        .step {
          padding-left: 50px;
        }

        .step::before {
          width: 35px;
          height: 35px;
          font-size: 1rem;
        }
      }

      /* 平滑滚动 */
      html {
        scroll-behavior: smooth;
      }

      /* 按钮样式 */
      .btn {
        display: inline-block;
        padding: 12px 24px;
        background: #667eea;
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
      }

      .btn:hover {
        background: #5a67d8;
        transform: translateY(-2px);
      }

      .btn-outline {
        background: transparent;
        border: 2px solid #667eea;
        color: #667eea;
      }

      .btn-outline:hover {
        background: #667eea;
        color: white;
      }

      /* 演示面板链接 */
      .demo-panel {
        text-align: center;
        margin: 40px 0;
        padding: 30px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        color: white;
      }

      .demo-panel h3 {
        color: white;
        border: none;
        padding: 0;
        margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header class="header">
      <div class="container">
        <h1>Universal Debug Logger</h1>
        <p>🚀 强大的通用JavaScript调试系统，支持所有JS环境</p>
        <div class="badges">
          <span class="badge">🌍 通用兼容</span>
          <span class="badge">🔌 零依赖</span>
          <span class="badge">🎨 DevTools风格</span>
          <span class="badge">📱 移动友好</span>
          <span class="badge">⚡ 高性能</span>
        </div>
      </div>
    </header>

    <!-- 导航 -->
    <nav class="nav">
      <div class="container">
        <ul>
          <li><a href="#features" class="nav-link">特性</a></li>
          <li><a href="#install" class="nav-link">安装</a></li>
          <li><a href="#react-native" class="nav-link">React Native</a></li>
          <li><a href="#browser" class="nav-link">浏览器</a></li>
          <li><a href="#examples" class="nav-link">示例</a></li>
          <li><a href="#api" class="nav-link">API文档</a></li>
        </ul>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main">
      <div class="container">
        <!-- 特性 -->
        <section id="features" class="section">
          <h2>✨ 核心特性</h2>
          <div class="features">
            <div class="feature-card">
              <div class="feature-icon">🌍</div>
              <h3>通用兼容</h3>
              <p>支持所有JavaScript环境：浏览器、Node.js、React Native、小程序等，一套代码到处运行。</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">🕸️</div>
              <h3>网络监控</h3>
              <p>自动拦截fetch、XMLHttpRequest、axios请求，支持请求头、响应体查看，无需手动配置。</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">🎯</div>
              <h3>DevTools风格</h3>
              <p>提供类似Google DevTools的调试面板，支持Console和Network标签页，筛选和搜索功能。</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">🔌</div>
              <h3>零依赖</h3>
              <p>无需额外三方库，避免兼容性问题，自动环境检测，开箱即用。</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">⚡</div>
              <h3>高性能</h3>
              <p>支持离线队列、批量发送、本地缓存，生产环境自动禁用，不影响应用性能。</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">📱</div>
              <h3>移动友好</h3>
              <p>专门优化的移动设备调试体验，支持React Native和各种小程序平台。</p>
            </div>
          </div>
        </section>

        <!-- 演示面板 -->
        <div class="demo-panel">
          <h3>🎮 在线演示</h3>
          <p>启动调试服务器后，访问调试面板体验完整功能</p>
          <a href="http://localhost:3000/debug-panel.html" class="btn btn-outline" target="_blank">打开调试面板</a>
          <a href="http://localhost:3000/examples/test.html" class="btn btn-outline" target="_blank">功能测试页面</a>
        </div>

        <!-- 安装 -->
        <section id="install" class="section">
          <h2>📦 项目集成</h2>
          <div class="install-section">
            <div class="install-tabs">
              <button class="install-tab active" onclick="showInstall('clone')">克隆项目</button>
              <button class="install-tab" onclick="showInstall('download')">下载集成</button>
              <button class="install-tab" onclick="showInstall('server')">启动服务</button>
            </div>
            <div id="install-clone" class="install-content">
              <pre><code class="language-bash"># 克隆完整项目
git clone https://github.com/your-repo/universal-debug-logger.git
cd universal-debug-logger
npm install</code></pre>
            </div>
            <div id="install-download" class="install-content" style="display: none">
              <pre><code class="language-bash"># 复制核心文件到您的项目（无需安装任何依赖）
src/DebugLogger.js           # 核心调试系统（自包含）
src/core/UniversalLogger.js  # 通用日志引擎（纯JS）
examples/ReactNative/        # React Native集成示例

# 您的项目 package.json 无需修改！
# 无需运行 npm install！</code></pre>
            </div>
            <div id="install-server" class="install-content" style="display: none">
              <pre><code class="language-bash"># 启动调试服务器
npm run server

# 服务器启动后访问：
# http://YOUR_IP:3000/docs/         - 文档网站
# http://YOUR_IP:3000/debug-panel.html - 调试面板</code></pre>
            </div>
          </div>

          <div class="alert alert-success"><strong>重要：</strong> 这是一个完整的调试系统项目，不是npm包。<strong>其他项目集成时无需安装任何依赖包！</strong>纯JavaScript实现，零依赖设计。</div>
        </section>

        <!-- React Native -->
        <section id="react-native" class="section">
          <h2>📱 React Native 接入</h2>
          <p><strong>基于网络通信的零依赖集成方案</strong> - 您的项目无需安装任何依赖包！</p>

          <div class="alert alert-info">
            <strong>正确架构：</strong> 调试面板独立运行，您的项目通过HTTP请求发送日志到调试面板，完全解耦无依赖。
          </div>

          <div class="steps">
            <div class="step">
              <h4>启动调试面板服务器</h4>
              <p>在调试面板项目中启动服务器：</p>
              <pre><code class="language-bash"># 在 log-printer 目录中
cd log-printer
npm install
npm run server

# 调试面板运行在: http://192.168.1.100:3000</code></pre>
            </div>

            <div class="step">
              <h4>选择客户端版本</h4>
              <p>根据您的需求选择合适的客户端版本：</p>
              
              <table class="version-table" style="width: 100%; border-collapse: collapse; margin: 15px 0;">
                <thead>
                  <tr style="background-color: #f5f5f5;">
                    <th style="padding: 10px; border: 1px solid #ddd;">文件名</th>
                    <th style="padding: 10px; border: 1px solid #ddd;">依赖</th>
                    <th style="padding: 10px; border: 1px solid #ddd;">通信方式</th>
                    <th style="padding: 10px; border: 1px solid #ddd;">优势</th>
                    <th style="padding: 10px; border: 1px solid #ddd;">推荐场景</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td style="padding: 10px; border: 1px solid #ddd;"><strong>debugClient-simple.js</strong></td>
                    <td style="padding: 10px; border: 1px solid #ddd;">无</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">HTTP 纯净版</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">🌟 <strong>专治连接问题</strong></td>
                    <td style="padding: 10px; border: 1px solid #ddd;"><strong>首选推荐</strong></td>
                  </tr>
                  <tr>
                    <td style="padding: 10px; border: 1px solid #ddd;">debugClient-websocket.js</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">无</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">WebSocket + HTTP降级</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">真零依赖，实时通信</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">网络环境好</td>
                  </tr>
                  <tr>
                    <td style="padding: 10px; border: 1px solid #ddd;">debugClient.js</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">axios</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">HTTP + 重试</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">稳定可靠</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">生产项目</td>
                  </tr>
                </tbody>
              </table>
              
              <div class="alert alert-success">
                <strong>首选推荐：</strong> 如果遇到连接问题，立即使用 <code>debugClient-simple.js</code>
              </div>
            </div>

            <div class="step">
              <h4>复制客户端文件</h4>
              <p>将选择的调试客户端复制到您的TypeScript React Native项目：</p>
              
              <div class="sub-step">
                <h5>方案一：简化版本（推荐）</h5>
                <pre><code class="language-bash"># 复制简化版本，专治连接问题
cp examples/NetworkClient/debugClient-simple.js your-rn-project/src/utils/</code></pre>
              </div>
              
              <div class="sub-step">
                <h5>方案二：WebSocket版本</h5>
                <pre><code class="language-bash"># 复制WebSocket版本，支持实时通信
cp examples/NetworkClient/debugClient-websocket.js your-rn-project/src/utils/</code></pre>
              </div>
              
              <div class="sub-step">
                <h5>方案三：axios版本（需要依赖）</h5>
                <pre><code class="language-bash"># 先安装axios依赖
cd your-rn-project
npm install axios

# 复制axios版本
cp examples/NetworkClient/debugClient.js your-rn-project/src/utils/</code></pre>
              </div>
            </div>

            <div class="step">
              <h4>配置服务器地址</h4>
              <p>在复制的调试客户端文件中修改服务器IP地址：</p>
              
              <div class="sub-step">
                <h5>简化版本配置</h5>
                <pre><code class="language-javascript">// debugClient-simple.js
class SimpleDebugClient {
  constructor(config = {}) {
    this.config = {
      serverUrl: 'http://10.240.20.130:3000', // 🔧 修改为您的实际IP
      enabled: typeof __DEV__ !== 'undefined' ? __DEV__ : true,
      timeout: 8000,
      retryCount: 2,
      ...config
    }
  }
}</code></pre>
              </div>
              
              <div class="sub-step">
                <h5>WebSocket版本配置</h5>
                <pre><code class="language-javascript">// debugClient-websocket.js
class DebugClient {
  constructor(config = {}) {
    this.config = {
      serverUrl: 'http://10.240.20.130:3000', // 🔧 修改为您的实际IP
      enabled: typeof __DEV__ !== 'undefined' ? __DEV__ : true,
      useWebSocket: true,
      reconnectInterval: 3000,
      maxReconnectAttempts: 3,
      ...config
    }
  }
}</code></pre>
              </div>
            </div>

            <div class="step">
              <h4>TypeScript类型定义</h4>
              <p>为TypeScript项目创建类型定义文件 <span class="inline-code">src/types/debug.d.ts</span>：</p>
              <pre><code class="language-typescript">// src/types/debug.d.ts
interface DebugClient {
  // 基础日志方法
  debug: (...messages: any[]) => Promise<boolean> | void
  info: (...messages: any[]) => Promise<boolean> | void
  log: (...messages: any[]) => Promise<boolean> | void
  warn: (...messages: any[]) => Promise<boolean> | void
  error: (...messages: any[]) => Promise<boolean> | void

  // 业务场景方法
  userAction: (action: string, details?: any) => Promise<boolean> | void
  pageEvent: (page: string, event: string, extra?: any) => Promise<boolean> | void
  networkLog: (method: string, url: string, request?: any, response?: any, duration?: number) => Promise<boolean> | void
  errorLog: (error: Error, context?: string) => Promise<boolean> | void
  performanceLog: (operation: string, duration: number, details?: any) => Promise<boolean> | void

  // 高级功能
  table: (data: any[], title?: string) => Promise<boolean> | void
  time: (label: string) => Promise<boolean> | void
  timeEnd: (label: string) => Promise<boolean> | void
  clear: () => Promise<boolean>
  testConnection: () => Promise<boolean>

  // 配置和状态
  updateConfig: (newConfig: any) => void
  getStatus: () => any
}

declare global {
  var $debug: DebugClient
}

export {}</code></pre>
            </div>

            <div class="step">
              <h4>在App中导入</h4>
              <p>在您的 <span class="inline-code">App.tsx</span> 中导入调试客户端：</p>
              <pre><code class="language-typescript">import React from 'react'
// 导入调试客户端（根据您选择的版本）
import './src/utils/debugClient-simple' // 或 debugClient-websocket.js
import './src/types/debug' // 导入类型定义

const App: React.FC = () => {
  React.useEffect(() => {
    // 页面生命周期日志
    global.$debug.pageEvent('App', 'mounted')
    
    // 测试连接和基础信息
    global.$debug.info('🚀 React Native App 启动成功', {
      platform: 'React Native',
      environment: __DEV__ ? 'development' : 'production',
      timestamp: new Date().toISOString()
    })

    // 测试调试连接
    global.$debug.testConnection()
  }, [])

  return (
    // 您的App组件内容
    <YourAppContent />
  )
}

export default App</code></pre>
            </div>
          </div>

          <div class="example">
            <h4>🚀 TypeScript React Native 完整示例</h4>
            <pre><code class="language-typescript">import React, { useEffect, useState } from 'react'
import { View, Button, Alert, TextInput, StyleSheet, Text } from 'react-native'

// TypeScript接口定义
interface LoginData {
  username: string
  password: string
}

interface LoginResponse {
  success: boolean
  message?: string
  user?: {
    id: number
    name: string
    email: string
  }
}

const LoginScreen: React.FC = () => {
  const [username, setUsername] = useState<string>('')
  const [loading, setLoading] = useState<boolean>(false)
  const [connectionStatus, setConnectionStatus] = useState<'unknown' | 'connected' | 'disconnected'>('unknown')

  useEffect(() => {
    // 页面生命周期日志
    global.$debug.pageEvent('LoginScreen', 'mounted')
    
    // 检查调试连接状态
    checkDebugConnection()
    
    return () => {
      global.$debug.pageEvent('LoginScreen', 'unmounted')
    }
  }, [])

  const checkDebugConnection = async () => {
    try {
      const isConnected = await global.$debug.testConnection()
      setConnectionStatus(isConnected ? 'connected' : 'disconnected')
      
      // 获取调试客户端状态
      const status = global.$debug.getStatus()
      global.$debug.info('📊 调试客户端状态', status)
      
    } catch (error) {
      global.$debug.errorLog(error as Error, 'checkDebugConnection')
      setConnectionStatus('disconnected')
    }
  }

  const handleLogin = async () => {
    // 用户行为日志
    global.$debug.userAction('login_attempt', { 
      username, 
      timestamp: new Date().toISOString() 
    })
    global.$debug.time('登录流程耗时')

    try {
      setLoading(true)
      
      const requestData: LoginData = { username, password: '123456' }
      
      // 记录网络请求开始
      global.$debug.info('🌐 开始登录请求', requestData)
      
      // 模拟网络请求（实际项目中使用fetch或axios）
      const response = await simulateLoginRequest(requestData)
      
      // 记录网络请求结果
      global.$debug.networkLog('POST', '/api/login', requestData, response)
      
      if (response.success) {
        global.$debug.info('✅ 登录成功', response)
        global.$debug.userAction('login_success', { 
          userId: response.user?.id 
        })
        Alert.alert('成功', '登录成功')
      } else {
        global.$debug.warn('⚠️ 登录失败', response)
        Alert.alert('失败', response.message || '登录失败')
      }
    } catch (error) {
      // 错误日志
      global.$debug.errorLog(error as Error, 'LoginScreen.handleLogin')
      Alert.alert('错误', '网络请求失败')
    } finally {
      setLoading(false)
      global.$debug.timeEnd('登录流程耗时')
    }
  }

  // 模拟网络请求
  const simulateLoginRequest = async (data: LoginData): Promise<LoginResponse> => {
    // 模拟网络延迟
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 模拟响应
    if (data.username === 'admin') {
      return {
        success: true,
        user: { id: 1, name: 'Admin User', email: 'admin@example.com' }
      }
    } else {
      return {
        success: false,
        message: '用户名或密码错误'
      }
    }
  }

  const handleInputChange = (text: string) => {
    setUsername(text)
    // 用户输入行为日志（节流处理）
    if (text.length % 3 === 0) { // 每3个字符记录一次
      global.$debug.userAction('input_username', { 
        length: text.length,
        preview: text.substring(0, 3) + '...'
      })
    }
  }

  const sendTestLogs = () => {
    global.$debug.userAction('send_test_logs')
    
    // 发送各种类型的测试日志
    global.$debug.debug('🐛 调试信息', { component: 'LoginScreen' })
    global.$debug.info('ℹ️ 信息日志', { status: 'testing' })
    global.$debug.warn('⚠️ 警告日志', { warning: 'test warning' })
    global.$debug.error('❌ 错误日志', new Error('测试错误'))
    
    // 表格数据测试
    global.$debug.table([
      { type: 'info', count: 5 },
      { type: 'warn', count: 2 },
      { type: 'error', count: 1 }
    ], '日志统计')
    
    Alert.alert('测试', '已发送测试日志到调试面板')
  }

  const getStatusColor = () => {
    switch (connectionStatus) {
      case 'connected': return '#4CAF50'
      case 'disconnected': return '#F44336'
      default: return '#9E9E9E'
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>TypeScript React Native 调试示例</Text>
      
      {/* 连接状态指示器 */}
      <View style={styles.statusContainer}>
        <Text style={styles.statusLabel}>调试连接状态: </Text>
        <View style={[styles.statusDot, { backgroundColor: getStatusColor() }]} />
        <Text style={[styles.statusText, { color: getStatusColor() }]}>
          {connectionStatus}
        </Text>
      </View>
      
      <TextInput
        style={styles.input}
        placeholder="输入用户名 (admin 可成功登录)"
        value={username}
        onChangeText={handleInputChange}
        autoCapitalize="none"
        autoCorrect={false}
      />
      
      <View style={styles.buttonContainer}>
        <Button 
          title={loading ? '登录中...' : '登录'} 
          onPress={handleLogin} 
          disabled={loading}
        />
        
        <Button 
          title="发送测试日志" 
          onPress={sendTestLogs}
          color="#2196F3"
        />
        
        <Button 
          title="检查连接" 
          onPress={checkDebugConnection}
          color="#FF9800"
        />
      </View>
      
      <Text style={styles.instructions}>
        在浏览器中查看实时日志：{'\n'}
        http://10.240.20.130:3000/debug-panel.html
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { 
    flex: 1, 
    padding: 20, 
    backgroundColor: '#f5f5f5' 
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20
  },
  statusContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 20
  },
  statusLabel: {
    fontSize: 14,
    marginRight: 8
  },
  statusDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginRight: 8
  },
  statusText: {
    fontSize: 14,
    fontWeight: 'bold'
  },
  input: { 
    borderWidth: 1, 
    borderColor: '#ddd', 
    padding: 12, 
    marginBottom: 20,
    borderRadius: 6,
    backgroundColor: '#fff'
  },
  buttonContainer: {
    gap: 10,
    marginBottom: 20
  },
  instructions: {
    fontSize: 12,
    textAlign: 'center',
    color: '#666',
    fontStyle: 'italic'
  }
})

export default LoginScreen</code></pre>
          </div>

          <div class="example">
            <h4>🌐 Axios 网络请求集成</h4>
            <p><strong>重要说明：</strong> 与完整版本不同，网络客户端需要手动记录axios请求详情：</p>
            <pre><code class="language-typescript">// 推荐的axios使用方式
const apiRequest = async (url: string, data: any) => {
  // 记录请求开始
  global.$debug.info(`开始请求: ${url}`, data)
  global.$debug.time(`API请求: ${url}`)

  try {
    const response = await axios.post(url, data)
    
    // 记录请求成功
    global.$debug.networkLog('POST', url, data, response.data)
    global.$debug.info(`请求成功: ${url}`, response.data)
    
    return response.data
  } catch (error) {
    // 记录请求失败
    global.$debug.error(`请求失败: ${url}`, {
      error: error.message,
      requestData: data,
      status: error.response?.status
    })
    throw error
  } finally {
    global.$debug.timeEnd(`API请求: ${url}`)
  }
}

// 使用示例
const loginUser = async (username: string, password: string) => {
  return await apiRequest('/api/login', { username, password })
}</code></pre>
          </div>

          <div class="example">
            <h4>📱 TypeScript类型支持</h4>
            <p>创建 <span class="inline-code">src/types/debug.d.ts</span>：</p>
            <pre><code class="language-typescript">interface DebugClient {
  debug: (...messages: any[]) => void
  info: (...messages: any[]) => void
  warn: (...messages: any[]) => void
  error: (...messages: any[]) => void
  userAction: (action: string, details?: any) => void
  pageEvent: (page: string, event: string, extra?: any) => void
  networkLog: (method: string, url: string, request?: any, response?: any) => void
  time: (label: string) => void
  timeEnd: (label: string) => void
  table: (data: any[], title?: string) => void
  clear: () => void
  testConnection: () => Promise<boolean>
}

declare global {
  var $debug: DebugClient
}

export {}</code></pre>
          </div>

          <div class="example">
            <h4>🎮 查看调试面板</h4>
            <p>启动服务器后，在浏览器中访问调试面板：</p>
            <pre><code class="language-bash"># 启动调试服务器
npm run server

# 在浏览器中访问
http://YOUR_IP:3000/debug-panel.html

# 实时查看您的React Native应用日志</code></pre>
            
            <div class="alert alert-info">
              <strong>调试面板功能：</strong>
              <ul style="margin: 10px 0; padding-left: 20px;">
                <li><strong>Console标签</strong>：查看所有日志，支持按级别筛选</li>
                <li><strong>Network标签</strong>：查看网络请求详情</li>
                <li><strong>实时更新</strong>：日志自动刷新显示</li>
                <li><strong>搜索功能</strong>：快速查找特定日志</li>
                <li><strong>导出功能</strong>：导出日志为JSON文件</li>
              </ul>
            </div>
          </div>

          <div class="example">
            <h4>🚀 生产级配置管理（推荐）</h4>
            <p>创建智能的调试配置管理系统，支持多环境自动切换：</p>
            
            <div class="sub-step">
              <h5>1. 创建调试配置文件</h5>
              <p>创建 <span class="inline-code">src/config/debug.ts</span>：</p>
              <pre><code class="language-typescript">/**
 * 调试配置管理 - 支持USB和局域网调试
 */
interface DebugConfig {
  enabled: boolean;
  serverUrl: string;
  useWebSocket: boolean;
  connectionMode: 'usb' | 'lan' | 'disabled';
  reconnectInterval: number;
  maxReconnectAttempts: number;
  connectionTimeout: number;
  heartbeatInterval: number;
}

const DEBUG_CONFIGS: Record<string, DebugConfig> = {
  dev: {
    enabled: true,
    serverUrl: 'http://localhost:3000', // USB调试模式
    useWebSocket: true,
    connectionMode: 'usb',
    reconnectInterval: 3000,
    maxReconnectAttempts: 3,
    connectionTimeout: 5000,
    heartbeatInterval: 30000,
  },
  
  sandbox: {
    enabled: true,
    serverUrl: 'http://10.240.20.130:3000', // 局域网调试模式
    useWebSocket: true,
    connectionMode: 'lan',
    reconnectInterval: 5000,
    maxReconnectAttempts: 2,
    connectionTimeout: 8000,
    heartbeatInterval: 30000,
  },
  
  prod: {
    enabled: false, // 生产环境禁用
    serverUrl: '',
    useWebSocket: false,
    connectionMode: 'disabled',
    // ... 其他配置
  },
};

export const getDebugConfig = (): DebugConfig => {
  const env = getEnv(); // 您的环境获取函数
  return DEBUG_CONFIGS[env.ENVIRONMENT] || DEFAULT_DEBUG_CONFIG;
};</code></pre>
            </div>

            <div class="sub-step">
              <h5>2. 在App.tsx中集成</h5>
              <pre><code class="language-typescript">import React, { useEffect } from 'react';
import { getDebugConfig } from './src/config/debug';

// 🔧 设置全局调试配置
global.__DEBUG_CONFIG__ = getDebugConfig();

// 📡 导入调试客户端（支持USB和WiFi）
import './src/utils/debugClient-websocket';

// 🌐 导入网络拦截器（自动记录axios请求）
import axiosInterceptor from './src/utils/axiosInterceptor';

function App(): React.JSX.Element {
  useEffect(() => {
    initializeDebugSystem();
  }, []);

  const initializeDebugSystem = async () => {
    const config = getDebugConfig();
    
    if (config.enabled) {
      // 🔧 安装Axios网络拦截器
      axiosInterceptor.install();
      
      // 📱 记录应用启动
      global.$debug.pageEvent('App', 'mounted', {
        environment: config.connectionMode,
        serverUrl: config.serverUrl
      });
      
      // 🔍 测试调试连接
      const isConnected = await global.$debug.testConnection();
      
      if (config.connectionMode === 'usb') {
        global.$debug.info('🔌 USB调试模式', {
          tip: '确保已执行: adb reverse tcp:3000 tcp:3000'
        });
      }
    }
  };

  return (
    // 您的App组件
  );
}</code></pre>
            </div>
          </div>

          <div class="example">
            <h4>🌐 Axios网络请求自动拦截</h4>
            <p>创建智能的axios拦截器，自动记录所有网络请求到调试面板：</p>
            
            <div class="sub-step">
              <h5>1. 创建网络拦截器</h5>
              <p>创建 <span class="inline-code">src/utils/axiosInterceptor.ts</span>：</p>
              <pre><code class="language-typescript">/**
 * Axios网络拦截器 - 自动记录所有网络请求
 */
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';

class AxiosDebugInterceptor {
  private requestTimings: { [key: string]: { startTime: number } } = {};
  private requestIdCounter = 0;

  install() {
    // 📤 请求拦截器
    axios.interceptors.request.use((config) => {
      const requestId = `axios_${Date.now()}_${++this.requestIdCounter}`;
      const startTime = Date.now();
      
      config.metadata = { requestId, startTime };
      this.requestTimings[requestId] = { startTime };

      // 🌐 记录请求开始
      global.$debug.info(`🌐 HTTP请求: ${config.method?.toUpperCase()} ${config.url}`, {
        requestId,
        method: config.method?.toUpperCase(),
        url: config.url,
        headers: this.sanitizeHeaders(config.headers),
        data: this.sanitizeData(config.data),
        timestamp: new Date().toISOString()
      });

      return config;
    });

    // 📥 响应拦截器
    axios.interceptors.response.use(
      (response: AxiosResponse) => {
        const { requestId, startTime } = response.config.metadata;
        const duration = Date.now() - startTime;

        // ✅ 记录成功响应
        global.$debug.info(`✅ HTTP成功: ${response.status} ${response.config.url} (${duration}ms)`, {
          requestId,
          status: response.status,
          data: this.sanitizeData(response.data),
          duration
        });

        // 📊 记录到网络面板
        global.$debug.networkLog(
          response.config.method?.toUpperCase() || 'GET',
          response.config.url || '',
          response.config.data,
          response.data,
          duration
        );

        return response;
      },
      (error: AxiosError) => {
        const { requestId, startTime } = error.config?.metadata || {};
        const duration = startTime ? Date.now() - startTime : 0;

        // ❌ 记录错误响应
        global.$debug.error(`❌ HTTP失败: ${error.config?.url} (${duration}ms)`, {
          requestId,
          error: error.message,
          status: error.response?.status,
          duration
        });

        return Promise.reject(error);
      }
    );
  }

  private sanitizeHeaders(headers: any) {
    // 隐藏敏感请求头
    const sensitive = ['authorization', 'cookie', 'x-api-key'];
    const result = { ...headers };
    
    Object.keys(result).forEach(key => {
      if (sensitive.includes(key.toLowerCase())) {
        result[key] = '***HIDDEN***';
      }
    });
    
    return result;
  }

  private sanitizeData(data: any) {
    // 限制数据大小，隐藏敏感字段
    if (!data) return data;
    
    const dataString = JSON.stringify(data);
    if (dataString.length > 10000) {
      return {
        _truncated: true,
        _size: dataString.length,
        _preview: dataString.substring(0, 1000) + '...'
      };
    }
    
    return data;
  }
}

export default new AxiosDebugInterceptor();</code></pre>
            </div>

            <div class="sub-step">
              <h5>2. 自动拦截效果</h5>
              <p>安装拦截器后，所有axios请求都会自动记录：</p>
              <pre><code class="language-typescript">// 🚀 在App.tsx中安装一次即可
import axiosInterceptor from './src/utils/axiosInterceptor';
axiosInterceptor.install();

// 📡 之后所有axios请求都会自动记录
const response = await axios.post('/api/login', {
  username: 'admin',
  password: '123456'
});

// 🎯 调试面板会自动显示：
// 🌐 HTTP请求: POST /api/login
// ✅ HTTP成功: 200 /api/login (1230ms)
// 📊 网络面板: 完整的请求/响应详情</code></pre>
            </div>
          </div>

          <div class="example">
            <h4>🔌 USB调试模式设置</h4>
            <p>推荐的调试方式，无需配置IP地址：</p>
            
            <div class="sub-step">
              <h5>1. 启动调试面板服务器</h5>
              <pre><code class="language-bash"># 在电脑上启动调试面板
npm run server:start

# 服务器运行在: http://localhost:3000</code></pre>
            </div>

            <div class="sub-step">
              <h5>2. 设置端口转发</h5>
              <pre><code class="language-bash"># 🔌 关键步骤：设置ADB端口转发
adb reverse tcp:3000 tcp:3000

# 验证端口转发
adb reverse --list</code></pre>
            </div>

            <div class="sub-step">
              <h5>3. React Native配置</h5>
              <pre><code class="language-typescript">// src/config/debug.ts
const DEBUG_CONFIGS = {
  dev: {
    enabled: true,
    serverUrl: 'http://localhost:3000', // USB调试模式
    connectionMode: 'usb',
    // ...
  }
};</code></pre>
            </div>
          </div>

          <div class="example">
            <h4>🔌 WebSocket版本特殊说明</h4>
            <p>优化后的WebSocket版本支持USB和WiFi双模式：</p>
            
            <div class="sub-step">
              <h5>WebSocket连接流程</h5>
              <pre><code class="language-typescript">// WebSocket版本会自动处理连接
// 1. 尝试建立WebSocket连接: ws://10.240.20.130:3000
// 2. 连接成功：实时双向通信
// 3. 连接失败：自动降级到HTTP模式
// 4. 支持断线重连（最多3次）

// 查看连接状态
const status = global.$debug.getStatus()
console.log('连接类型:', status.connectionType) // 'WebSocket' 或 'HTTP'
console.log('WebSocket状态:', status.websocketReady)
console.log('离线日志队列:', status.queuedLogs)</code></pre>
            </div>
            
            <div class="sub-step">
              <h5>WebSocket vs HTTP 模式对比</h5>
              <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
                <thead>
                  <tr style="background-color: #f0f0f0;">
                    <th style="padding: 8px; border: 1px solid #ddd;">特性</th>
                    <th style="padding: 8px; border: 1px solid #ddd;">WebSocket模式</th>
                    <th style="padding: 8px; border: 1px solid #ddd;">HTTP降级模式</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td style="padding: 8px; border: 1px solid #ddd;"><strong>连接方式</strong></td>
                    <td style="padding: 8px; border: 1px solid #ddd;">持久连接</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">每次请求建立连接</td>
                  </tr>
                  <tr>
                    <td style="padding: 8px; border: 1px solid #ddd;"><strong>性能</strong></td>
                    <td style="padding: 8px; border: 1px solid #ddd;">低延迟，实时传输</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">标准HTTP延迟</td>
                  </tr>
                  <tr>
                    <td style="padding: 8px; border: 1px solid #ddd;"><strong>离线处理</strong></td>
                    <td style="padding: 8px; border: 1px solid #ddd;">队列缓存，重连后发送</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">立即尝试发送</td>
                  </tr>
                  <tr>
                    <td style="padding: 8px; border: 1px solid #ddd;"><strong>网络适应性</strong></td>
                    <td style="padding: 8px; border: 1px solid #ddd;">需要稳定网络</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">更好的网络兼容性</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="alert alert-info">
            <strong>版本选择建议：</strong>
            <ul style="margin: 10px 0; padding-left: 20px;">
              <li><strong>debugClient-simple.js</strong>：遇到连接问题时的首选，纯HTTP稳定可靠</li>
              <li><strong>debugClient-websocket.js</strong>：网络环境好时的最佳选择，支持实时通信</li>
              <li><strong>debugClient.js</strong>：生产环境推荐，需要axios依赖但功能完善</li>
            </ul>
          </div>

          <div class="alert alert-warning">
            <strong>TypeScript React Native 项目注意事项：</strong>
            <ul style="margin: 10px 0; padding-left: 20px;">
              <li><strong>类型安全</strong>：必须创建debug.d.ts类型定义文件</li>
              <li><strong>模块导入</strong>：使用相对路径导入调试客户端</li>
              <li><strong>全局声明</strong>：确保global.$debug在TypeScript中可用</li>
              <li><strong>开发环境</strong>：利用__DEV__变量控制调试功能</li>
              <li><strong>性能考虑</strong>：在生产环境自动禁用调试功能</li>
            </ul>
          </div>
        </section>

        <!-- 浏览器使用 -->
        <section id="browser" class="section">
          <h2>🌐 浏览器使用</h2>
          <p>在浏览器环境中使用非常简单，支持模块化导入和直接使用。</p>

          <div class="example">
            <h4>ES模块导入</h4>
            <pre><code class="language-html">&lt;script type="module"&gt;
  import Debug from './src/DebugLogger.js'
  
  // 配置调试系统
  Debug.updateConfig({
    serverUrl: 'http://localhost:3000',
    enableRemoteLogging: true,
    enableConsoleLogging: true
  })
  
  // 使用
  Debug.info('页面加载完成')
  Debug.table([{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}])
  
  // fetch请求会自动被拦截
  fetch('/api/data').then(response => response.json())
&lt;/script&gt;</code></pre>
          </div>

          <div class="alert alert-info"><strong>自动拦截：</strong> 所有的 fetch、XMLHttpRequest 和 axios 请求都会自动被拦截并显示在调试面板中。</div>
        </section>

        <!-- API文档 -->
        <section id="api" class="section">
          <h2>📚 API 文档</h2>

          <h3>基础日志方法</h3>
          <div class="example">
            <pre><code class="language-javascript">// 基础日志级别
Debug.debug('调试信息')    // 仅开发时显示
Debug.info('信息日志')     // 重要状态信息
Debug.warn('警告信息')     // 潜在问题
Debug.error('错误信息')    // 错误和异常</code></pre>
          </div>

          <h3>高级功能</h3>
          <div class="example">
            <pre><code class="language-javascript">// 表格输出
const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]
Debug.table(users, '用户列表')

// 计时功能
Debug.time('API请求')
await fetch('/api/data')
Debug.timeEnd('API请求') // 自动显示耗时

// 分组日志
Debug.group('用户登录流程')
Debug.info('验证用户输入')
Debug.info('发送登录请求')
Debug.info('处理响应')
Debug.groupEnd()

// 断言检查
Debug.assert(user.age >= 18, '用户必须年满18岁')

// 调用栈追踪
Debug.trace('追踪调用栈')</code></pre>
          </div>

          <h3>网络监控</h3>
          <div class="example">
            <pre><code class="language-javascript">// 自动拦截（推荐）
// 这些请求会自动出现在Network面板中
fetch('/api/users')
axios.post('/api/login', userData)

// 手动记录（可选）
const requestId = Debug.networkRequest('POST', '/api/data', {
  headers: {'Content-Type': 'application/json'},
  data: {key: 'value'}
})

Debug.networkResponse(requestId, {
  status: 200,
  data: {success: true}
})</code></pre>
          </div>

          <h3>业务场景封装</h3>
          <div class="example">
            <pre><code class="language-javascript">// React Native 全局方法示例
global.$debug.network('POST', '/api/login', requestData, responseData)
global.$debug.userAction('button_click', { buttonId: 'login' })
global.$debug.pageEvent('HomeScreen', 'focus')
global.$debug.pageEvent('HomeScreen', 'blur')</code></pre>
          </div>

          <h3>配置选项</h3>
          <div class="example">
            <pre><code class="language-javascript">Debug.updateConfig({
  serverUrl: 'http://192.168.1.100:3000',  // 调试服务器地址
  enableRemoteLogging: true,                // 启用远程日志
  enableConsoleLogging: true,               // 启用控制台日志
  maxLocalLogs: 1000,                      // 最大本地日志数
  autoSendInterval: 0                      // 发送间隔(0=立即发送)
})</code></pre>
          </div>
        </section>

        <!-- 示例 -->
        <section id="examples" class="section">
          <h2>🎯 完整示例</h2>

          <h3>React Native登录页面</h3>
          <div class="example">
            <pre><code class="language-typescript">import React, { useState, useEffect } from 'react'
import { View, TextInput, Button, Alert } from 'react-native'
import axios from 'axios'

const LoginScreen: React.FC = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    global.$debug.pageEvent('LoginScreen', 'mounted')
    global.$debug.info('登录页面初始化完成')
    
    return () => {
      global.$debug.pageEvent('LoginScreen', 'unmounted')
    }
  }, [])

  const handleLogin = async () => {
    global.$debug.userAction('login_attempt', { username })
    global.$debug.time('登录流程')

    // 输入验证
    if (!username || !password) {
      global.$debug.warn('登录验证失败', { reason: '用户名或密码为空' })
      Alert.alert('错误', '请输入用户名和密码')
      return
    }

    try {
      setLoading(true)
      global.$debug.info('开始登录请求', { username })

      // 这个请求会自动被拦截并显示在Network面板中
      const response = await axios.post('/api/auth/login', {
        username,
        password
      })

      if (response.data.success) {
        global.$debug.info('登录成功', {
          userId: response.data.user.id,
          token: response.data.token ? '***' : null // 不记录敏感信息
        })
        global.$debug.userAction('login_success', { userId: response.data.user.id })
        
        // 导航到主页
        // navigation.navigate('Home')
      } else {
        global.$debug.warn('登录失败', response.data)
        Alert.alert('登录失败', response.data.message)
      }
    } catch (error) {
      global.$debug.error('登录异常', {
        error: error.message,
        username,
        timestamp: Date.now()
      })
      Alert.alert('网络错误', '请检查网络连接后重试')
    } finally {
      setLoading(false)
      global.$debug.timeEnd('登录流程')
    }
  }

  return (
    &lt;View style={{padding: 20}}&gt;
      &lt;TextInput
        placeholder="用户名"
        value={username}
        onChangeText={(text) =&gt; {
          setUsername(text)
          global.$debug.userAction('input_username', { length: text.length })
        }}
        style={{borderWidth: 1, padding: 10, marginBottom: 10}}
      /&gt;
      
      &lt;TextInput
        placeholder="密码"
        value={password}
        onChangeText={(text) =&gt; {
          setPassword(text)
          global.$debug.userAction('input_password', { hasValue: text.length &gt; 0 })
        }}
        secureTextEntry
        style={{borderWidth: 1, padding: 10, marginBottom: 20}}
      /&gt;
      
      &lt;Button
        title={loading ? '登录中...' : '登录'}
        onPress={handleLogin}
        disabled={loading}
      /&gt;
    &lt;/View&gt;
  )
}

export default LoginScreen</code></pre>
          </div>

          <h3>错误边界集成</h3>
          <div class="example">
            <pre><code class="language-typescript">import React from 'react'

class ErrorBoundary extends React.Component&lt;
  {children: React.ReactNode},
  {hasError: boolean}
&gt; {
  constructor(props: any) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true }
  }

  componentDidCatch(error: Error, errorInfo: any) {
    // 记录错误到调试系统
    global.$debug.error('React错误边界捕获', {
      error: error.message,
      stack: error.stack,
      componentStack: errorInfo.componentStack,
      timestamp: Date.now()
    })
  }

  render() {
    if (this.state.hasError) {
      return &lt;Text&gt;Something went wrong.&lt;/Text&gt;
    }

    return this.props.children
  }
}</code></pre>
          </div>

          <div class="alert alert-warning"><strong>注意：</strong> 在生产环境中，调试系统会自动禁用，不会影响应用性能。记录日志时避免包含用户密码、token等敏感信息。</div>
        </section>

        <!-- 启动服务器 -->
        <section class="section">
          <h2>🚀 启动调试服务器</h2>
          <div class="steps">
            <div class="step">
              <h4>启动服务器</h4>
              <pre><code class="language-bash">npm run server</code></pre>
              <p>服务器将在 <span class="inline-code">http://YOUR_IP:3000</span> 启动</p>
            </div>

            <div class="step">
              <h4>访问调试面板</h4>
              <p>浏览器打开：<a href="http://localhost:3000/debug-panel.html" target="_blank">http://localhost:3000/debug-panel.html</a></p>
            </div>

            <div class="step">
              <h4>测试功能</h4>
              <p>访问测试页面：<a href="http://localhost:3000/examples/test.html" target="_blank">http://localhost:3000/examples/test.html</a></p>
            </div>
          </div>

          <div class="alert alert-info"><strong>提示：</strong> 确保您的设备和调试服务器在同一网络中，将配置中的IP地址替换为实际的服务器IP地址。</div>
        </section>
      </div>
    </main>

    <!-- 脚部 -->
    <footer class="footer">
      <div class="container">
        <p>&copy; 2024 Universal Debug Logger. MIT License.</p>
        <p>🚀 一套代码，调试所有JavaScript环境</p>
      </div>
    </footer>

    <!-- 语法高亮 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

    <script>
      // 安装选项卡切换
      function showInstall(type) {
        // 隐藏所有内容
        document.querySelectorAll('.install-content').forEach((el) => (el.style.display = 'none'))
        document.querySelectorAll('.install-tab').forEach((el) => el.classList.remove('active'))

        // 显示选中的内容
        document.getElementById('install-' + type).style.display = 'block'
        document.querySelector(`[onclick="showInstall('${type}')"]`).classList.add('active')
      }

      // 平滑滚动导航
      document.querySelectorAll('.nav-link').forEach((link) => {
        link.addEventListener('click', (e) => {
          e.preventDefault()
          const target = document.querySelector(link.getAttribute('href'))
          if (target) {
            target.scrollIntoView({ behavior: 'smooth', block: 'start' })
          }
        })
      })

      // 导航高亮
      window.addEventListener('scroll', () => {
        const sections = document.querySelectorAll('section')
        const navLinks = document.querySelectorAll('.nav-link')

        let current = ''
        sections.forEach((section) => {
          const sectionTop = section.offsetTop - 100
          if (window.pageYOffset >= sectionTop) {
            current = section.getAttribute('id')
          }
        })

        navLinks.forEach((link) => {
          link.classList.remove('active')
          if (link.getAttribute('href') === '#' + current) {
            link.classList.add('active')
          }
        })
      })
    </script>
  </body>
</html>
